<template>
	<div class="yemao">
	<div id="header">
		<a href="http://m.zhai.me/#/school">
		<div class="h_left">
			<h2>北a楼</h2>
			<p>北京联合大学</p>
		</div>
		</a>
		<div class="h_right"> 
			<div>
				<img src="../../assets/images/kdzq.png" alt="" />
			</div>
			<router-link to='kdzq'>
			<div>
				开店赚钱
			</div>
			</router-link>
		</div>
	</div>
	
		<div class='img'>
			<img src="../../assets/images/ympic_1.png"/>
		</div>
		<!--宿舍商家卡片-->
		<div class="salecade">
			<div class="salecade_top">
				<div>
					<img src="../../assets/images/face.jpg" alt="" />
				</div>
				<div>
						<h2>北A3-4层男神店</h2>
						<p>
							<span>57</span>件商品
							<span>北A楼</span>
						</p>
				</div>
				<div>
					预
				</div>
			</div>
			
			<div class="salecade_bottom" v-on:click="change">
				<div>付</div>
				<p v-show="shows" >本店支持支付宝,分期乐,微信在线支付	</p>
				<span class="tips" v-if="zhuanOk">∟</span>
				<span class="tipe" v-else>∟</span>
				<!--<p v-show="!fuck" v-on:click="change"></p>-->
				<!--<span class="tips">∟</span>-->
			</div>
		</div>
			<v-footer></v-footer>
		
	</div>
	
</template>

<script>
	import vFooter from "../footer/footer";
	
	export default({
		data(){
			return {
				shows:false,
				zhuanOk:true
			}
		},
		methods:{
			change() {
				this.shows = !this.shows;
				this.zhuanOk = !this.zhuanOk;
			}
		},
		components:{
			vFooter
		}
	})

	
</script>

<style scoped="scoped">
	.yemao{
		background-color:#f4f4f4;
		position: absolute;
		width:100%;
		height: 100%;
	}
	#header{
		position: absolute;
		left:0;
		right:0;
		display:flex;
		width:100%;
		height:1.81081rem;
		background:-webkit-gradient(linear,50% 100%,50% 0,from(transparent),to(#6a6c6c));
		
	}
	.h_left{
		width:5.81081rem;
		height:0.972972rem;
		background:#d1d2d4;
		border-radius:0.5625rem;
		position: absolute;
		top:0.324324rem;
		left:2.162162rem;
		display:flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.h_left h2{
		font-weight:normal;
		font-size:0.378378rem;
		color:#565a5d;
	}
	.h_left p{
		font-size:0.297297rem;
		color:#666;
		padding-bottom:0.081081rem;
	}
	.h_right{
		position: absolute;
		top:0.378378rem;
		right:0.594594rem;
		display:flex;
		flex-direction:column;
		align-items:center;
	}
	.h_right div:first-child img{
		width:0.54054rem;
		height:0.486486rem;
	}
	.h_right div:nth-of-type(1){
		font-size:0.27027rem;
		color:#fff;
		padding-top:0.063243rem;
	}

	.img img{
		width:100%;
	}
	.salecade{
		margin:0.27027rem auto;
		/*width:9.594594rem;*/
		width:94.7%;
		height:3.351351rem;
		-webkit-box-shadow: 0px 10px 10px #ddd,0 22px 22px #ddd;
		-moz-box-shadow: 0px 10px 10px #999;
	}
	.salecade_top {
		display:flex;
		height:2.162162rem;
		justify-content: space-between;
		padding: 0.2116216rem 0.378378rem;
		background:#fff;
		position: relative;
	}
	.salecade_top div:first-child{
		padding-top:0.162162rem;
	}
	.salecade_top div:first-child img{
		width:1.621621rem;
		height:1.621621rem;
		border-radius:50%;
	}
	.salecade_top div:nth-of-type(2){
		position: absolute;
		left:2.621621rem;
		top:0.47027rem;
	}
	.salecade_top div:nth-of-type(2) h2{
		font-size:0.41rem;
		font-weight:normal;
		color:#666;
	}
	.salecade_top div:nth-of-type(2) p{
		font-size:0.297297rem;
		color:#999;
	}
	.salecade_top div:nth-of-type(3){
		color:#fff;
		font-size:0.243243rem;
		width:0.486486rem;
		height:0.486486rem;
		line-height:0.486486rem;
		text-align: center;
		background:#4cbcea;
		border-radius:50%;
	}
	.salecade_bottom{
		height:1.189189rem;
		background:#fafafa;
		display:flex;
		position: relative;
	}
	
	.salecade_bottom div:first-of-type{
		width:0.54054rem;
		height:0.54054rem;
		line-height:0.54054rem;
		text-align: center;
		background:#fed362;
		color:#fff;
		font-size:0.297297rem;
		position: absolute;
		left:0.54054rem;
		top:0.324324rem;
	}
	.salecade_bottom p{
		font-size:0.324324rem;
		color:#999;
		position: absolute;
		left:1.251351rem;
		top:0.4027rem;
		/*display:none;*/
	}
	.tips{
		color:#e33865;
		/*font-weight:bold;*/
		font-size:0.43513rem;
		transform: rotate(-45deg);
		position: absolute;
		top:0.265135rem;
		right:0.54054rem;
	}
	.tipe{
		color:#e33865;
		/*font-weight:bold;*/
		font-size:0.43513rem;
		transform: rotate(135deg);
		position: absolute;
		top:0.5135rem;
		right:0.54054rem;
	}
</style>

